*{
    padding: 0;
    margin: 0;
}
html{
    font-size: 5.33333vw;
}



.clearfix::before,.clearfix::after{
    content: '';
    display: table;
    clear: both;
}


header{
    width: 100%;
    height: 2.25rem;
    background-color: #333333;
    display: grid;
    grid-template-columns: 1.5rem 1.88rem 10.69rem 4.69rem;
    grid-template-rows: 2.25rem;
    color: white;
    font-size: .7rem;
    transition: all 1s;
    .header-1{
        line-height: 2.25rem;
        text-align: center;
       
        img{
            width: 1.5rem;
            height: 1.5rem;
            margin: .38rem .19rem .38rem 0;
        }
        span{
            font-size: .8rem;
            color:grey;
        }

    }
    .header-2{
        line-height: 2.25rem;
        text-align: center;
        background-color: red;
    }
   
}
header:hover{
    display: none;
}
















nav{
    width: 100%;
    height: 2.2rem;
    background-color: #e43130;
    display: flex;
    position: sticky;
    top: .5rem;
    z-index: 1;
    .nav-1{
        margin: .7rem 0 0 .75rem;
        width: 1rem;
        height: .9rem;
        display: block;
        background: url(../img/snagang.png);
        background-size: 100%;
    }
    .nav-2{
        width: 13.16rem;
        height: 1.5rem;
        background-color: white;
        padding: 0 .5rem 0 0;
        margin: .35rem .5rem 0px .5rem;
        border-radius: .75rem;
        display: flex;
        overflow: hidden;
        img{
            width: 1rem;
            height: .75rem;
            margin: .4rem .4rem 0px .75rem;
        }
        .shuxian{
            width: .05rem;
            height: .75rem;
            margin-top: .4rem;
            background-color: grey;
        }
        span{
            width: .9rem;
            height: .75rem;
            margin: .4rem 0px 0px .25rem;
            font-size: .8rem;
        }
        .wenben1{
            input{
                width: 10rem;
                height: 1.5rem;
                border: none;
                outline: none;
                &[value="搜索商品/店铺"]{
                    font-size: .6rem;
                }
            }
        }
        
    }
    .nav-3{
        margin: .5rem 0;
        color: white;
        font-size: .8rem;
       
    }
}






aside{
    width: 100%;
    height: 7.15rem;
    position: relative;
    background-color: #f6f6f6;
    
    &::before{
        position: absolute;
        content: '';
        width: 100%;
        height: 5rem;
        border-bottom-left-radius: 2rem;
        border-bottom-right-radius: 2rem;
        background-color: red;
       
    }
    
    .pic{
        width: 17.51rem;
        height: 7rem;
        margin: auto;
        position: relative;
        overflow: hidden;
        
       
        .pic-1{
            width: 70.04rem;
            height: 7rem;
            display: flex;
            position: absolute;
            animation: donghua1 8s infinite  steps(1,end);
            
            img{
                width: 17.51rem;
                height: 7rem;
            }
           
           
        }
       
        
        
        
    }
    .dian-0{
        top: -1rem;
        left: 8.18rem;
        position: relative;
        width: 2.4rem;
        height: .6rem;
        overflow: hidden;
        
    }
    .dian-1{
        position: absolute;
        width: 5.4rem;
        height: .6rem; 
        display: flex;
        animation: donghua2 8s infinite  steps(1,end);
        
        
        .iconfont{
            font-size: .25rem;
            color:grey;
            &:nth-child(5){
                color: orange;
            }
    
        }
       
    }

}
@keyframes donghua1{
    form{
        transform: translateX(0%);
    }
    25%{
        transform: translateX(-25%);
    }
    50%{
        transform: translateX(-50%);
    }
    75%{
        transform: translateX(-75%);
    }
    to{
        transform: translateX(-100%);
    }
}
@keyframes donghua2{
    form{
        transform: translateX(0%);
    }
    25%{
        transform: translateX(-0.6rem);
    }
    50%{
        transform: translateX(-1.2rem);
    }
    75%{
        transform: translateX(-1.8rem);
    }
    to{
        transform: translateX(-2.4rem);
    }
}




.main-1{
    width: 100%;
    height: 8.1rem;
    color: #666666;
    display: grid;
    grid-template-columns: repeat(5,3.75rem);
    grid-template-rows: repeat(2, 3.68rem) .73rem;
    background-color: #f6f6f6;
   
    .box-main{
        text-align: center;
        img{
            width: 2rem;
            height: 2rem;
            margin: .5rem 0 0;
        }
        span{
            font-size: .6rem;
            display: block;
            margin: .3rem 0 0;
        }
    }
    .box-main1{
        grid-column: 1/6;
        .box-main2{
            width: 1.8rem;
            height: .6rem;
            margin: auto;
            margin-top: -0.3rem;
            
            span{
                font-size: .6rem;
            }
            span:nth-child(1){
                color: orange;
            }

        }
        
    }
}




.main-2{
    width: 100%;
    height: 7.75rem;
    background-color: #f6f6f6;
    padding-top: .25rem;
    .main-21{
       
        width: 17.76rem;
        height: 6.75rem;
        background-color: #ffffff;
        margin: auto;
        box-shadow: 0 0 .25rem gray;
        border-radius: 7px;
        overflow: hidden;
        .main-22{
            background: url(../img/main-2-bg.png);
            background-size: 100%;
            width: 100%;
            height: 1.7rem;
            display: flex;
            .jdms{
                
                width: 2.8rem;
                height: 1.35rem;
                color: #333333;
                margin: .4rem .25rem 0 .5rem;
                font-size: .7rem;

            }
            img{
                margin-top: .4rem;
                width: 1.5rem;
                height: 1rem;
            }
            .time-1{
                margin-left: .25rem;
                span{
                    font-size: .7rem;
                    color: #e43130;
                }
                .time1-11{
                    display: inline-block;
                   width: .8rem;
                   height: .95rem;
                    color: white;
                    background-color: red;
                    border-radius: .2rem;
                }

            }
            .gdms{
                margin-left: 4.3rem;
                font-size: .6rem;
                line-height: 1.7rem;
                color: red;
            }
            .sanjiao{
                font-size: .6rem;
                line-height: 1.7rem;
                color: red;
                margin-top: .03rem;
            }





        }
        .main-23{
            width: 100%;
            height: 5rem;
            margin-top: .25rem;
            .main-24{
                padding: 0 .31rem 0 .31rem;
                width: 17.15rem;
                height: 100%;
                display: grid;
                grid-template-columns: repeat(6, 2.76rem);
                grid-template-rows: 3.86rem;
                
                span{
                    color: red;
                    font-size: .65rem;
                    margin-left: 25%;
                }
                img{
                    width: 2.76rem;
                    height: 2.76rem;
                }
            }

        }

    }
}



.main-3{
    width: 100%;
    height: 30.5rem;
    grid-template-columns: repeat(2,8.63rem);
    grid-template-rows: repeat(2,14rem);
    display: grid;
    margin: auto;
    justify-content: space-evenly;
    row-gap: .5rem;
    .main-31{
       img{
           width: 8.63rem;
           height: 8.63rem;
       }
       .main-311{
           width: 7.63rem;
           height: 5.1rem;
           padding: 0 .5rem; 
            p{
                font-size: .7rem;
                color: #434343;
            }
            span{
                color: red;
            }
            .f311{
                display: flex;
                span{
                    color: gray;
                    font-size: .6rem;
                }
                .kanxiangsi{
                    margin-left: 2rem;
                    width: 2.5rem;
                    height: 1rem;
                    border-radius: .5rem;
                    background-color: gray;
                    color: black;
                    font-size: .6rem;
                    text-align: center;
                    line-height: 1rem;
                }
            }


       }
    }

}







.footer-1{
    width: 16.76rem;
    height: .89rem;
    padding: .8rem 1rem;
    color: #848689;
    font-size: .7rem;
    display: flex;
    justify-content: space-evenly;
    border-top:.05rem solid #848689;
    border-bottom:.05rem solid #848689;

  
}
.footer-2{
    width: 18rem;
    height:3.6rem;
    padding: .2rem .38rem;
    display: flex;
    justify-content: space-evenly;
    border-bottom:.05rem solid #848689;
    img{
        width: 3rem;
        height: 3rem;
    }
}
.footer-3{
    width: 100%;
    height: .88rem;
    padding: .38rem 0rem;
    
    border-bottom:.05rem solid #848689;
    font-size: .6rem;
    color: #848689;
    text-align: center;
}
.footer{
    display: flex;
    justify-content: space-evenly;
    height: 2.5rem;
    align-items: center;
    box-shadow: 0 0 5px gray;
    position: fixed;
    bottom: 0rem;
    width: 18.76rem;
    background-color: white;
    
    
    
    img{
        width: 3rem;
        height: 2.3rem;

    }

}